<template>
  <div class="irrigationInfo">
    <TitleColumn name="灌区情况" />
    <section class="content">
      <div class="overview">
        <img src="./images/overview.png" />
      </div>
      <div class="description">
        <div class="introduction">
          <h3 class="title">灌区简介</h3>
          <p>新禹河灌区位于江苏省的西南部，隶属南京六合区，是《江苏省中型灌区续建配套与现代化改造规划（2021-2035）》确定的集农业灌溉、生态供水及防洪除涝为一体的重点中型灌区之一。灌区由雄州、横梁以及龙袍三个街道组成，共涉及  28 个社区；灌区范围东与江苏省仪征市交界，南以滁河为界，西、北分别与六合区金牛山灌区接壤。</p>
        </div>
        <div class="duties">
          <h3 class="title">工作职责</h3>
          <article>
            <p data-text="1">贯彻国家有关方针、政策，宣传、执行相关法律、法规，落实上级主管部门的决定、指示以及灌区代表大会及其全委会的决议；</p>
            <p data-text="2">建立健全灌区各级专管机构、用户集体管理组织，实施灌区管理的规章制度；</p>
            <p data-text="3">建立员工岗位学习、脱产培训制度，建立教育基金；</p>
          </article>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import TitleColumn from '@/components/TitleColumn';

  defineOptions({ name: 'IrrigationInfo' });

  const state = reactive({
    name: 'vue3',
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .irrigationInfo {
    width: 100%;
    .content {
      width: 100%;
      height: calc(100% - 24px);
      background: #02123433;
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      .overview {
        width: 330px;
        height: 240px;
        margin-right: 20px;
        img {
          width: 330px;
          height: 240px;
        }
      }
      .description {
        h3.title {
          font-size: 14px;
          color: #fff;
          padding-top: 6px;
          margin-bottom: 2px;
          display: flex;
          align-items: center;
          &::before {
            content: '';
            display: inline-block;
            width: 18px;
            height: 18px;
            background: url(./images/decorate.png) no-repeat;
            background-size: 100% 100%;
            margin-top: 4px;
          }
        }
        .introduction {
          p {
            color: #B4DFFF;
            font-size: 11px;
            padding-left: 6px;
          }
        }
        .duties {
          p {
            color: #B4DFFF;
            font-size: 11px;
            display: flex;
            padding-left: 20px;
            position: relative;
            margin-bottom: 4px;
            &::before {
              content: attr(data-text);
              display: inline-block;
              width: 16px;
              height: 16px;
              color: #B4DFFF;
              background: #0C5975;
              box-shadow: 0px 0px 4px 0px #23DF7B52 inset;
              border: 1px solid #20F8FF;
              border-radius: 50%;
              font-size: 14px;
              display: flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              left: 0px;
              top: 4px;
            }
          }
        }
      }
    }
  }
</style>
